魅力的なアイキャッチの作り方【デザインの重要な3つのコツも紹介】
記事の顔にもなるアイキャッチ画像。一番重要なのはもちろん記事の内容ではありますが、アイキャッチ画像も読みたいと思わせる重要なポイントです。
アイキャッチ画像が魅力的だと、読み手の目を惹き、見にきてくれる人も増えることでしょう。
しかし、なかなかしっくりくるアイキャッチ画像が作れず、作成に意外と時間がかかってしまったなんてこともあるかと思います。クラスメソッド社内でも、アイキャッチ画像を作る時のポイントが知りたい！という声がありましたので、アイキャッチ画像の作成方法についてまとめます！
今回は初心者デザイナーに向けて、アイキャッチ画像を作成する上で最低限意識すべきことにフォーカスします。上級テクニックではありませんので、基本の部分を知りたいという方の参考になれば幸いに思います。
アイキャッチ画像は目を引くために欠かせない！
アイキャッチは、サイト記事やYouTubeなど何かしらのWebページの見出しとして表示されている画像のことです！
ちなみにサムネイルと何が違うの？という疑問の簡単な回答としては、アイキャッチ画像をより小さく表示した画像を指します。記事を開いた時にトップに大きく表示れている画像がアイキャッチ。記事の一覧など小さく表示されているアイキャッチ画像をサムネイルと呼びます。ただ、アイキャッチは和製英語なので、この辺は少し曖昧です。総称してサムネイルと呼ぶ場合もあるので、もし依頼を受けて作成する際には認識合わせをしておくと安心かと思います。
サムネイルとして小さく表示された場合にも見やすいアイキャッチ画像を作ることが理想です。そして、OGP画像として表示されることも想定すると、なお良いです。
OGPについて説明します。
「OGP」とはWebページをSNSにシェアするときに使われる仕組み
OGPとは「Open Graph Protocol（オープン・グラフ・プロトコル）」の略です。
TwitterやFacebookなどのSNSでWebページがシェアされた際に、サムネイル画像やタイトル、説明文などをタイムライン上で意図した通りに正しく表示させる仕組みです。Webページのアイキャッチ画像はSNSでシェアされると、タイムラインに小さく表示されますよね。あれはOGP画像です。OGP画像として縮小される際に、サイズや描画領域が適切でないと重要な情報が見切れてしまったりします。正しく設定された画像を使用することでSNSを見ているユーザーに、適切に魅力が伝わります。
このOGPの仕組みも踏まえた上で、どの形でシェアされても問題のないアイキャッチを作成するという大切なポイントを覚えておいてください。
作り始める前に知っておくべき大切な3点のポイント
まず、レイアウトを考える前に必要なポイントが3つあります。
- セーフゾーン内に大切な情報を入れる
- 公式ロゴ、画像などの扱いには注意する
- 素材は美しいものを使う
それぞれご紹介します。
①セーフゾーン内に大切な情報を入れる
ポイント1つ目は、セーフゾーン内に大切な情報を入れることです。先ほどOGP画像となった場合も情報が見切れることがないアイキャッチ画像を作成しましょうと書きました。セーフゾーンとは、SNSでシェアされる際に画像サイズがカットされる場合にも見切れることのないゾーンです。
具体的なサイズは、汎用性が高く綺麗に表示されるので基本的に「横1200px × 縦630px」で作成します。
主要なSNSで推奨されているOGP画像サイズは以下です。
- Twitter / Facebookの推奨画像サイズ：横1200px × 縦630px
- LINE：正方形で表示される
「横1200px × 縦630px」から正方形でカットされた場合にも情報が消えてしまわないよう、可能な限りセーフライン内に情報を入れます。可能な限りで構いません。
横600px × 縦600pxをセーフゾーンとして作成すると、OGP画像となった場合も大切な情報が見切れることがありません。
補足として、横1200px × 縦630pxのサイズは汎用性が高いというだけなので、表示させる媒体に合わせて適切なサイズを選ぶことが重要です。また、セーフラインに入れることに縛られすぎるのもデザインの幅が狭くなってしまう要因になりますので、状況に応じて使い分けるのが良いでしょう。この知識があるのとないのでは違うと思いますので、ぜひ参考にしてみてください。
②公式ロゴ、画像などの扱いには注意する
ポイント2つ目は、公式のロゴや画像を使用する際は必ずガイドラインに目を通すことです。
公式のロゴや画像を扱う際は、以下の2点に留意し、著作権を侵害しないように注意しましょう。
- ロゴは基本的に公式のものしか使用してはいけない。また、ガイドラインなどがあれば必ず目を通す。
- 画像素材のライセンスなどを必ず把握し、権利範囲内での使用を行う。
また、公式のロゴは最新のものを使います。公式だからと確認せず使用することの無いよう、常に最新の情報をチェックします。
ロゴなどの扱いについて、もう1点重要なポイントをお伝えします。それは「ロゴの形によっては真ん中に配置しても真ん中に見えないことがある」という点です。目の錯覚ですね。
目の錯覚にもいろいろありますが、今回は「三角形分割錯覚」をご紹介します。下の画像を見てください。
三角の中に赤い点があります。皆さんの目には、中心よりも少し上に赤い点があるように見えるのではないでしょうか？しかし赤い点は、底辺と頂点を結んだ三角形の高さの中心にあります。
私たちの人間の目は、無意識に物の重心を探す習性があるようです。物を実際に触ったり持ち上げたりする際に、その物の重心を把握することが大切だからですね。なので、高さの数値的な中心ではなく、重心の中心をこの三角形の中心だと感じるようです。
こちらが、三角形の重心の中心に赤い点を置いたものです。真ん中に見えますね。
このように、人間の目には多くの錯覚がありますので、ロゴなどの配置は数値上の中心に捉われずに自分の目で見て調整するようにしましょう。
③素材は美しいものを使う
素材を使用する際、必ず美しいものを使用するようにしましょう。ジャギった画像、汚い画像などの使用はNGです。（シャギった画像とは、周りがギザギザと劣化してしまっている画像です。）
なぜ画像がギザギザしてしまうのでしょうか？これは、PNGやJPEGなどの画像を拡大すると起こります。これらはビットマップ形式のため拡大するとギザギザに見えてしまったり、繰り返し編集することで画質が劣化してしまう性質があるのです。
これに対し、SVGはどんなサイズでも美しく表示することができます。SVGはベクター形式のため拡大・縮小を伴う編集を行っても画像の劣化はありません。
画像を数値データをもとに再現する方式で作られているため、デバイスの解像度や画面サイズによって画質が変わってしまうということが起こらないのです。また、多くの場合はファイルサイズも小さくなるため、Webページのレスポンス向上も期待できます。
と、ここまでSVGのメリットを多く挙げましたが、必ずしもSVGがベストという訳ではありません。ロゴやアイコン、平面的なイラストはSVGでの管理が美しいかつ扱いやすいですが、写真などの複雑な色や形を表現するにはラスタ形式の方が優れています。どんな素材を使うのか、状況に応じて使い分けましょう！
アイキャッチ作成におけるデザインの3つのコツ
見やすいレイアウトには、きちんと根拠があります。画面上に配置されているすべてのものに理由がなくてはならないのです。
イラストを一つ置くにしても、なぜそれを選ぶのか・なぜその大きさなのか・なぜそこに置くのかをデザイナーは常に考えています。その根拠となるものは知識です。なんとなくレイアウトするのではなく、知識に基づいて配置するようにしましょう。これを聞くととても難しいことのように聞こえてしまうかもしれませんが、そんなことはありません！最初は3つのコツを意識するだけでOKです。
知っていると、デザインが良くなるコツを3つご紹介いたします。
1. デザインの原則を踏まえてレイアウトする
デザインの原則については、「デザインの現場で絶対に必要になる基礎知識７選」の記事にまとめていますのでこちらをご一読ください。今回のアイキャッチ作成では、この記事の中の【デザインの4大原則】の部分をピックアップします。
画面上のグラフィックをなんとなくで配置するのではなく、ルールを守りましょうということです。
上記の記事にも書いてある内容ですが、こちらでも再度おさらいしたいと思います。【デザインの4大原則】を簡単にご説明すると以下です。
①近接→関連し合う情報は近づける
近接とは、「関係するデザイン要素を近づけてグループ化すること」です。人間は近くにあるものを一つのグループとして認識する習性があります。
こちらは近接の一例です。色とその名前が関連し合う情報です。これらを近づけることで、同じ情報を指していることが伝わります。近接で大切なのは、関連する情報を近づけるだけでなく、関連しない情報との間に空白を取ることです。
②整列→デザイン上のグラフィックやテキストの色・大きさ・フォント・位置などを揃える
整列とは、「デザイン上の様々な要素を視覚的に関連させること」です。
ただ同じルールで配置しようというだけではありません。大きさ・色・フォントなども整え、一貫性を持たせましょうということです。
こちらは整列の一例です。先ほどの近接と組み合わせ、同じ情報同士は近づけて、同じスタイルで整列させています。
整列のコツは見えない線で繋げることです。この名刺の例では、名前とアドレスなどの情報の間に空白を取っていますが、配置位置は左端の見えない線で繋がっているので整って見えます。
③強弱→異なる要素同士が類似することの無いよう、はっきりと差をつける
強弱は、「異なる要素同士が類似することの無いよう、はっきりと差をつけること」です。コントラストとも言います。
こちらは強弱の一例です。異なる情報を思いきってスタイルをはっきりと異ならせることで、伝わりやすいかつインパクトのあるレイアウトになります。
④反復→デザインのスタイルやルールも繰り返す
反復は、「デザイン上のある特徴を繰り返すことで統一感を生み出すこと」です。
一つの画面内で複数のルールを採用していると、画面が多くの要素で溢れ分かりにくくなってしまいます。最低限のルールの中で、スタイルを統一することで全体に一貫性のあるデザインになります。Webデザインでは、デザイン上のレイアウトのスタイルやルールを「トーン&マナー」といいます。
2. 色えらびに配慮する
色は無限の組み合わせがありますよね。何色を採用するか迷うことも多いかと思います。
基本的にテキストを入れる場合には、見やすさ・読みやすさが最も重要です。多くは、「背景が薄い色→テキストは濃い色」「背景が濃い色→テキストは薄い色」となります。背景はいわば家の壁紙のような役割なので、はっきりとした強い色にしてしまうと目が痛くなってしまいます。背景に色を使う場合には、少し落ち着いたカラーを採用するのがおすすめです。
色を使用する際の考え方は多く存在しますが、「デザインの現場で絶対に必要になる基礎知識７選」でも紹介した【トーン】について見ていただけるとより色について理解が深まるかと思います。
技術紹介ブログを書く場合には、公式のロゴとそのサービス名を載せる場合もあるかと思います。サイズや扱い方、背景色についての指定がある場合もありますのでまず規約を確認して見ましょう。特に記載ない場合は、公式のロゴなどは基本的に白い背景に置くのが大きな問題もなく見やすくていいかと思います。公式のサイトを確認して、同じ背景色を採用するのもありです。ただし何度も言いますが公式のロゴを使用する際には、必ず規約を確認しましょうね！
3. フォントのイメージを合わせる
表現したいアイキャッチ画像のイメージは、表現したいことや、誰に届けるのかによって変わります。デザインのテイストや色と同じく、テキストのフォントもデザインのイメージを表現する重要な役割を果たします。
読みやすさ？可愛さ？おしゃれさ？何を重要視するのか、再度見直してフォントを選んでみましょう！
Canvaのテンプレを使えば簡単にアイキャッチを作れる
デザインするときの基礎知識やコツを紹介しましたが、世の中には便利なものがありますので使いましょう。Canvaのテンプレを使えば5分以内で簡単に素敵なアイキャッチが作れます。
使い方はとてつもなく簡単です。
Canvaのサイトの右上にある「Create a Design」をクリックすると、画面サイズの一覧が出ます。ロゴ用の500x500pxや、Instagram用の1080x1080pxなどがあります。
今回は1200x630pxのアイキャッチの作成なので、「Custom Size」をクリックし、サイズ指定をします。
サイズを指定して「Create a Design」をクリックすると、アートボード画面へ移動します。この画面の左側に並んでいるのがテンプレートです。キーワードでの検索や、色での絞り込みなども可能で非常に便利です！
今回のこの記事のアイキャッチもCanvaで作成いたしました。
テンプレートから選んで、テキストを編集。配置や大きさなどの細かな調節をして完成です。今回は写真を使用していませんが、写真を使いたい場合にも簡単に差し替えることが可能です。
楽！簡単！おしゃれ！
なるべく時間をかけずに作りたい！という場合に非常におすすめです。ぜひ使って見てください。
最後に画像の圧縮をしよう
最後に、作成した画像を圧縮して使用することをおすすめします。最近出会った圧縮サービス【あっしゅくま】をご紹介します。
こちらの【あっしゅくま】は、ブラウザ上で簡単にファイルの圧縮を行うことができるサイトです。
（頑張って圧縮してくれているくまさんが可愛い…）
圧縮した場合の画像の劣化が少なく、また複数の画像を一括で圧縮することが可能です。さらに、圧縮率の変更やリサイズも可能です。
ぜひ使ってみてください！
できたアイキャッチがどのように表示されるのかみてみる
こうして完成した画像、最後に問題ないかチェックしてみましょう！【OGP画像シュミレーター】をご紹介します。
シュミレートしたい画像をドラック＆ドロップで追加します。
すると各サイズで表示された場合の画像を一覧することができます。毎回やる必要はありませんが、たまにどのような形で表示されるのか見ることも、デザインを見直すきっかけになるのでやってみてください。
さらにアクセシビリティにも配慮できるとGood！
使用している色の組み合わせによっては、見えにくく感じる方がいたり、あるいは全然文字が読めない！なんてこともあるかもしれません。
色覚シミュレートができるサイト【Chromatic Vision Simulator】をご紹介いたします！
【こちらをクリックでChromatic Vision Simulatorへ】
上のバーから、ファイルをアップロードします。
今回のアイキャッチはどのように見えるのでしょうか。
D型の人には青、T型の人には赤・緑のように見えていることがわかりました。文字は問題なく読めていますし、表現したいイメージからもズレていないので、こちらで完成にします！
まとめ
今回は、アイキャッチ作成に特化して記事をまとめました。
Webページのメインはあくまで中身です。しかし、アイキャッチが魅力的だと見てくれる人も確実に増えます。
また、世に出ている多くのアイキャッチ画像もリサーチもしてみると、自分のデザインの引き出しを増やせますよ！
参考になれば幸いです。最後まで読んでいただきありがとうございました！
